<template>
  <div class="exchangePAge">
    <div>
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/config/luckDrawPage' }"
          ><span style="color: #101010; font-weight: 600"
            >返回奖项配置<----{{ title }}</span
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
      <el-button type="primary" @click="addExchangeGoods()">添加奖品</el-button>
    </div>
    <div>
      <el-table :data="addGoodsList" border style="width: 100%">
        <el-table-column
          label="ID"
          type="index"
          :index="indexMethod"
          width="70"
          align="center"
        />
        <el-table-column
          prop="prizeId"
          label="奖品Id"
          width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="prizeName"
          label="奖品名称"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="weightString"
          label="中奖概率"
          width="140"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="sendCount"
          label="已抽中"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="total"
          label="奖品库存"
          width="130"
          align="center"
        >
        </el-table-column>
        <!-- 单个用户限制中奖的个数 -->
        <el-table-column
          prop="limitNum"
          label="单个用户限制中奖的个数"
          width="191"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editAddGoods(scope.row)"
              >编辑</el-button
            >
            <el-button @click="deleteGoods(scope.row)" type="danger" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <luckPrizeAdd
      v-if="addOrEdit == 1"
      :addOrEdit="addOrEdit"
      :ids="ids"
      @getAddGoodsList="getAddGoodsList"
    ></luckPrizeAdd>
    <luckPrizeEdit
      v-if="addOrEdit == 2"
      :editGoodsCont="editGoodsCont"
      :ids="ids"
      :addOrEdit="addOrEdit"
      @getAddGoodsList="getAddGoodsList"
    ></luckPrizeEdit>
    <!-- <luckPrizeAddP
      v-if="addOrEdit == 4"
      :addOrEdit="addOrEdit"
      :ids="ids"
      @getAddGoodsList="getAddGoodsList"
    >
    </luckPrizeAddP> -->
  </div>
</template>
<script>
import luckPrizeAdd from "./luckPrizeAdd.vue";
import luckPrizeEdit from "./luckPrizeEdit.vue";
// import luckPrizeAddP from "./luckPrizeAddP.vue";
import requestAxios from "../../../http";
export default {
  name: "luckPrizePage",
  components: {
    luckPrizeAdd,
    luckPrizeEdit,
    // luckPrizeAddP,
  },
  data() {
    return {
      addOrEdit: false, //添加新的商品还是编辑
      editGoodsCont: {}, //编辑的商品信息
      addGoodsList: [],
      totalPage: 0,
      pageNum: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getAddGoodsList();
  },
  created() {
    //query 传参  奖池传过来的id
    this.id = this.$route.query.id;
    this.title = this.$route.query.title;
  },
  methods: {
    indexMethod(index) {
      return (this.pageNum - 1) * this.pageSize + index + 1;
    },

    //添加
    addExchangeGoods() {
      this.addOrEdit = 1;
      this.ids = this.id;
      // this.addOrEdit = 1;
      // this.ids = this.id;
      // console.log(this.addGoodsList.length, "1111");
      // if (this.addGoodsList && this.addGoodsList.length == 0) {
      //   this.addOrEdit = 4;
      //   this.ids = this.id;
      // } else {
      //   this.addOrEdit = 1;
      //   this.ids = this.id;
      // }
    },
    //编辑
    editAddGoods(item) {
      console.log(item);
      this.addOrEdit = 2;
      this.ids = this.id;
      this.editGoodsCont = JSON.parse(JSON.stringify(item));
      console.log(this.editGoodsCont, "父组件数据");
    },
    //获取奖池列表信息
    getAddGoodsList() {
      requestAxios
        .fetchGet(
          "/api/v2.1/exchange/store/management/prize/prizeInfoList?id=" +
            this.id,
          {
            headers: {},
          }
        )
        .then((data) => {
          console.log(data, "____)))))))))))))))))))))))))0");
          if (data.status == 200 && data.data.success) {
            console.log("获取奖项列表", data.data);
            this.addGoodsList = data.data.data;
            console.log(this.addGoodsList, "1111111");
            this.totalPage = data.data.data.iTotalDisplayRecords;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //删除
    deleteGoods(item) {
      console.log("删除某个奖品", item);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteConfirm(item.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteConfirm(id) {
      let that = this;
      requestAxios
        .fetchGet(
          "/api/v2.1/exchange/store/management/prize/prizeGroupDetail/delete?id=" +
            id,
          {
            headers: {},
          }
        )
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("删除奖品", data.data);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log("11111112");
            let totalPage = Math.ceil((this.totalPage - 1) / this.pageSize);
            let currengpage =
              this.pageNum > totalPage ? totalPage : this.pageNum;
            this.pageNum = currengpage < 1 ? 1 : currengpage;
            console.log(this.pageNum);
            that.getAddGoodsList();
            location.reload(); // 刷新页面  解决删除数据 不删除
            console.log("223232323");
          } else {
            console.log("删除奖品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>
<style scoped>
</style>
